{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Python基础语法</title>
<style>
		html, body {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}

		.div-a{ float:left;width:50%;height:100%;border:1px solid #F00;overflow-y:scroll}
		.div-b{ float:right;width:49%;height:100%;border:0px solid #000}


        div#butt	{
            height:50px;
            border-bottom: 0px solid #c5c5c5;
            background:#fff;
            }

        div#butt input {
            margin:10px 0 0 10px;
            background:blueviolet;
            color:#fff;
            width:150px;
            height:30px;
            font:14px Verdana, Arial, Helvetica, sans-serif;
            }

        form{

            height:45%;
            width:100%;
            margin-left:0px;
			border:0px solid #c5c5c5;
            }
		#CodeArea{
			height:100%;
            width:100%;
            margin-left:0px;
		}
        #TestCode{
            height:85%;
			width:99%;
            overflow:auto;
            border:1px solid #c5c5c5;
            font:14px "Courier New", Courier, monospace;
            }
        #CodeArea h2	{
            margin:10px 0 6px 5px;
            color:brown;
            font-size:14px;
            }

        #result	{
            height:48%;
            width:100%;
			margin-left:0px;
			border:0px solid red;
            }
		#output{
            width:99%;
            height:85%;
            overflow:auto;
            border:1px solid #c5c5c5;
            font:14px "Courier New", Courier, monospace;
            }

        #result h2	{
            margin:10px 0 6px 5px;
            color:brown;
            font-size:14px;
            }

</style>
<script src="{% static "common/jquery-1.8.2.js" %}" type="text/javascript"></script>
</head>
<body>
<div class="div-a">
    <li data-role="list-divider" data-theme="b">Python基础语法</li>
  <div id="" class="ui-body ui-body-a">
    <p>在正式学习Python前，我们先简单了解一些Python中的基础语法，便于后续的学习。</p><br/>
    <h3>交互式编程</h3>
    <p>
        交互式编程是直接通过解释器的交互模式来编写代码。比如在Windows系统中安装 Python 时已经已经安装了默认的交互式编程客户端，<<<被称为提示符，在提示符后输入代码，然后敲击enter回车就可以运行程序了：<br/>
        <img src="{% static "python/image/jiaohu.png" %}" alt="jiaohu"/>
    </p>
    <h3>脚本式编程</h3>
    <p>
        脚本式编程是将程序写成脚本文件后再通过解释器执行：<br/>
        <img src="{% static "python/image/jiaoben.png" %}" alt="jiaoben"/>
    </p>
    <h4>print打印输出</h4>
    <p>
       使用Print可以把我们指定的东西打印出来：<br/>
        >>> print 'hello, world'<br/>
        hello, world<br/>
        这样我们就完成了我们的第一个程序，怎么样，很简单吧？<br/>
    </p>
    <h4>编码问题</h4>
    <p>
        前面我们已经学会了如何用Python输出’Hello,World’,那现在我们想输出中文字符该怎么办呢？如果像输出英文字符一样输出中文字符会怎样呢？例如：<br/>
        print '你好'<br/>
        程序执行后结果会报错。这是因为Python中默认的编码格式是 ASCII 格式，在没修改编码格式时无法正确打印中文，所以在读取中文时会报错。要解决这个问题也很简单，只需要在文件的开头加上# -*- coding: UTF-8 -*- 或者 #coding=utf-8 就行了：<br/>
        #coding=utf-8<br/>
        print '你好'<br/>

    </p>
    <h3>注释</h3>
    <p>
        写程序时我们常常会添加一些注释，便于他人理解和提醒自己。在Python中，用#开头表示单行注释，注释后的语句将不会执行。<br/>
        示例：<br/>

        L=[1,2,3,4,5]#创建一个列表<br/>

        #创建一个列表<br/>
        L=[1,2,3,4,5]<br/>
        多行注释使用三个单引号(‘’’)或三个双引号(“””)：<br/>

        ’’’<br/>
        多行注释可以使用单引号。<br/>
        多行注释可以使用单引号。<br/>
        多行注释可以使用单引号。<br/>
        ’’’<br/>

    </p>
  </div>

</div>
<div class="div-b">
	<form action="#" method="post" id="tryitform" name="tryitform" onSubmit="validateForm();" target="i" id="form-a">
		<div id="CodeArea">
		<h2>编辑您的代码：</h2>
		<textarea id="TestCode" wrap="logical">
#!/usr/bin/python
# -*- coding: utf-8 -*-
print "hello world!"
print '你好'
		</textarea>
		</div>
		<input type="hidden" id="code" name="code"  />

	</form>
<div id="butt">
		<input type="button" value="提交代码" onClick="submitTryit()" id="submit">
		</div>
	<div id="result">
		<h2>查看结果:</h2>
		<textarea id="output" wrap="logical"></textarea>
	</div>
</div>
<script type="text/javascript">
	function submitTryit()
	{

	    var t=document.getElementById("TestCode").value;

	    document.getElementById("code").value=t;

	    validateForm();
        $.ajax({
         type:"GET",
         url:"/moon/codeHandler",
         data:{"code":t},
         success:function(ret){
            $('#output').html(ret.result)
            }
        })

	}

	function validateForm()
	{
	var code=document.getElementById("code").value;
	if (code.length>5000)
		{
		document.getElementById("code").value="<h1>Error</h1>";
		}
	}
</script>
</body>
</html>
